<script>
  export let value = "";
  let inputEle;
</script>

<div class="input input-primary w-full relative tt-input-color">
  <div class="color-icon" style={`background-color:${value}`} />
  <p class=" h-full w-full">{value}</p>
  <input
    class="w-full absolute top-0 bottom-0 right-0 left-0"
    style="height:100%"
    type="color"
    bind:value
    bind:this={inputEle}
  />
</div>

<style>
  .tt-input-color {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .tt-input-color input {
    cursor: pointer;
    opacity: 0;
  }
  .color-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 1rem;
    border-radius: 50%;
  }
  .tt-input-color p {
    line-height: 3rem;
  }
</style>
